<template>
  <div class="content_body">
    <div style="margin: 10px 0 10px 10px;">
      <el-button-group>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDic()">新增字典</el-button>
        <el-button type="primary" icon="el-icon-delete">删除字典</el-button>
        <el-button type="primary" icon="el-icon-edit">修改字典</el-button>
        <el-button type="primary" icon="el-icon-search">查询字典</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="toggleSelection()">取消选择</el-button>
      </el-button-group>
    </div>
    <div style="margin: 0 10px 0 10px;">
      <el-table
        ref="multipleTable"
        :data="dicList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="5%" align="center"></el-table-column>
        <el-table-column prop="description" label="字典名称"  min-width="15%" header-align="center"></el-table-column>
        <el-table-column prop="type" label="字典类别" min-width="10%" header-align="center"></el-table-column>
        <el-table-column prop="label" label="标签名"  min-width="15%" header-align="center"></el-table-column>
        <el-table-column prop="value" label="字典值" min-width="10%" header-align="center"></el-table-column>
        <el-table-column prop="create_by" label="创建人" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="remarks" label="备注" min-width="10%" header-align="center"></el-table-column>
        <el-table-column label="操作" min-width="15%" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-body">
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNo"
            :page-sizes="[10, 50, 100, 500]"
            :page-size="pageInfo.pageSize"
            layout="sizes, prev, pager, next"
            :total="pageInfo.totalRecord">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="addDic">
      <el-dialog title="添加字典信息" :visible.sync="dialogAddFormVisible" :modal-append-to-body="false" width="40%">
        <el-form :model="form">
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="字典名称" :label-width="formLabelWidth">
                <el-input v-model="form.description" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="字典值" :label-width="formLabelWidth">
                <el-input v-model="form.value" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="英文名称" :label-width="formLabelWidth">
                <el-input v-model="form.label" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="排序因子" :label-width="formLabelWidth">
                <el-input v-model="form.sort" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="字典类型" :label-width="formLabelWidth">
                <el-input v-model="form.type" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="备注信息" :label-width="formLabelWidth">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.remarks" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSave()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="editDic">
      <el-dialog title="修改字典信息" :visible.sync="dialogEditFormVisible" :modal-append-to-body="false" width="40%">
        <el-form :model="form">
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="字典名称" :label-width="formLabelWidth">
                <el-input  v-model="pageInfo.description" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="字典值" :label-width="formLabelWidth">
                <el-input v-model="pageInfo.value" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="英文名称" :label-width="formLabelWidth">
                <el-input v-model="pageInfo.label" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="排序因子" :label-width="formLabelWidth">
                <el-input v-model="pageInfo.sort" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="字典类型" :label-width="formLabelWidth">
                <el-input v-model="pageInfo.type" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="备注信息" :label-width="formLabelWidth">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="pageInfo.remarks" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updSave()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
  
</template>
<script>
export default {
  name: "dic_manage",
  data() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      dicList: [],
      dicAllList: [],
      multipleSelection: [],
      currentPage: 4,
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      form: {
          id: '',
          value: '',
          label: '',
          type: '',
          description: '',
          sort:'',
          create_by:'',
          create_time:'',
          update_by:'',
          update_time:'',
          remarks:'',
          is_del:''
        },
        formLabelWidth: '70px'
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.ajax({
        url: this.API.server_dic_manage.dic_page,
        data: this.pageInfo,
        success: resultData => {
          this.dicList = resultData.data.results;
          this.pageInfo.totalRecord = resultData.data.totalRecord;
        }
      }),
      this.ajax({
        url:this.API.server_dic_manage.dic_list,
        data: {},
        success: resultData => {
          this.dicAllList = resultData.data;
        }
      })
    },
    handleEdit(index, rowdata) {
      Object.assign(this.pageInfo, rowdata);
      this.url = "dic_edit";
      this.dialogEditFormVisible = true;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.load();
    },
    addDic(){
      this.pageInfo = {
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize,
        totalRecord: this.pageInfo.totalRecord
      };
      this.url = "dic_save";
      this.dialogAddFormVisible = true;
    },
    addSave() {
      console.log(this.url);
      this.ajax({
        url: this.API.server_dic_manage[this.url],
        data: this.form,
        success: resultData => {
          this.list = resultData.data
          if(resultData.status === 0){
            this.load();
            this.$message({
              message: '恭喜你，记录已保存成功',
              type: 'success'
            });
            this.dialogAddFormVisible = false
          }else{
             this.$message.error(resultData.msg);
          }
        }
      });
    },
    updSave() {
      console.log(this.url);
      this.ajax({
        url: this.API.server_dic_manage[this.url],
        data: this.pageInfo,
        success: resultData => {
          this.list = resultData.data
          if(resultData.status === 0){
            
            this.$message({
              message: '恭喜你，记录已修改成功！',
              type: 'success'
            });
            this.load();
            this.dialogEditFormVisible = false
          }else{
             this.$message.error(resultData.msg);
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.content_body{
  position: fixed;
  height: 100%;
  width: 86%;
  overflow: scroll;
  background-color: #fff;
}
.pagination-body{
  display: flex;
  width:100%;
  flex-direction:row-reverse;
  padding-top: 10px;
}
.line-Body{
  display: flex;
  width: 100%;
  flex-flow: row;
}
.line-Body .line-all{
  width: 100%;
}
.el-dialog__header{
  border-bottom: 1px solid #333;
}
.el-main{
  line-height: 0px;
}
</style>

